<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.find{
		float: right;
	}
	.breadcrumb > li + .find::before {
		content: "";
		padding: 0px;
	}
	.breadcrumb > li{
		line-height: 34px;
	}
	.breadcrumb{
		height: 50px;
	}
	.find .input-group-addon{
		cursor: pointer;
	}
	nav{
		text-align: center;
	}

    .ellipsis {
      position: relative;
      width: 100% ;
      max-height: 3em;
      height: 3em;
      line-height: 1.5;
      overflow: hidden;
    }
    .ellipsis::before {
      content: '...';
      position: absolute;
      z-index: 1;
      bottom: 0;
      right: 0;
      width: 1.5em;
      padding-left: 3px;
      box-sizing: border-box;
      background-color: white;
    }
    .ellipsis::after {
      content: '';
      display: inline-block;
      position: absolute;
      z-index: 2;
      width: 100%;
      height: 100%;
      background-color: white;
    }


</style>
</head>
<body>
<ol class="breadcrumb">
	<li><a><span class="glyphicon glyphicon-home"></span> 当前位置：</a></li>
  	<li><a href="#">资源管理</a></li>
  	<li class="active">图片</li>
  	<li class="find col-md-3 col-lg-3 col-sm-4 col-xs-6">
  		<div class="input-group">
		  	<input type="text" class="form-control" id="imageSearch" name="search" onchange="searchChange()" data-th-value="${param.search}"  placeholder="搜索">
		  	<span class="input-group-addon" onclick="searchChange()"><span class="glyphicon glyphicon-search"></span>搜索</span>
		</div>
  	</li>
  	
</ol>

<div class="row" id="thumDiv">
 </div>

 <div class="page" style="text-align: center;">
        <ul class="pagination"></ul>
 </div>
<script type="text/javascript">
	var pageable={
		page:0,
		size:12,
		pageSum:10,
		search:'',
		sort:'updateTime,desc'
	};
	$(function(){
		pageable.search=$('#imageSearch').val();
		$.post('sysFile/imagePage',pageable,function(data){
			pageable.page=data.number;
			showThumbnails(data.content);
			if(data.totalPages>0){
				setPage(data.number+1, data.totalPages, refreshThuDiv);
			}
		});
	});
	
	function refreshThuDiv(){
		pageable.search=$('#imageSearch').val();
		$.post('sysFile/imagePage',pageable,function(data){
			pageable.page=data.number;
			showThumbnails(data.content);
		});	
	}
	
	function showThumbnails(list){
		var thumDiv=$('#thumDiv');
		thumDiv.empty();
		for(var i=0;i<list.length;i++){
			thumbnail=list[i];
			var div1=$('<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"/>');
			var div2=$('<div class="thumbnail" style="height: 350px;"/>');
			div2.append($('<img style="height: 60%;" alt="缩略图"/>').attr('src','sysFile/download3?fileUuid='+thumbnail.fileUuid).attr('onclick',"showImage('"+thumbnail.fileUuid+"')"));
			var div3=$('<div class="caption" style="text-align: center;"/>');
			div3.append($('<h5/>').html(thumbnail.fileTitle));
			div3.append($('<p class="ellipsis"/>').html(thumbnail.fileRemark+" 文件名："+thumbnail.fileName));
			var p_btn=$('<p/>');
			p_btn.append($('<a class="btn btn-primary"/>').attr('href','sysFile/download2?fileUuid='+thumbnail.fileUuid).html('下载'));
			p_btn.append($('<button class="btn btn-info" style="margin-left:10px;" onclick="yl_edit(this,'+thumbnail.id+')"/>').text('修改'));
			p_btn.append($('<button class="btn btn-danger" style="margin-left:10px;" onclick="yl_delete(this,'+thumbnail.id+')"/>').text('删除'));
			//div3.append($('<p/>').append($('<a class="btn btn-primary"/>').attr('href','sysFile/download2?fileUuid='+thumbnail.fileUuid).html('下载')));
			div3.append(p_btn);
			div2.append(div3);
			div1.append(div2);
			thumDiv.append(div1);
		}
	}
	
	function showImage(fileUuid){
		var dialog = $('<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"></div>');
        dialog.load('sysFile/image',{fileUuid:fileUuid},function(){});
        $("body").append(dialog);
        dialog.modal().on('hidden.bs.modal', function () {
            dialog.remove();
        });
     }
	
	function yl_edit(btn,id){
        var dialog = $('<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"></div>');
        dialog.load('sysFile/edit', {id:id});
        $("body").append(dialog);
        dialog.modal().on('hidden.bs.modal', function () {
        	//关闭弹出框的时候清除绑定(这个清空包括清空绑定和清空注册事件)
        	ko.cleanNode(document.getElementById("formEdit"));
        	dialog.remove();
        	refreshThuDiv();
        });

	}
	
	
	function yl_delete(btn,id){
		bootbox.confirm({ 
		    size: "small",
		    message: "是否要删除这个资源?",
		    callback: function(result){ 
		    	if(result){
					$.post('sysFile/delete',{id:id},function(data){
						if(data.success){
							var that=$(btn).parents(".thumbnail");
							that.find('img').attr('src','static/img/deleted.jpg').attr('onclick','');
							that.find('button').attr('disabled',true);
							//that.find('button').addClass('disabled');
							that.find('a').addClass('disabled');
						}else{
							alert(data.msg);
						}
					});
		    	}
		    }
		});
	}
	/**
    *
    * @param pageCurrent 当前所在页
    * @param pageSum 总页数
    * @param callback 调用ajax
    */
   function setPage(pageCurrent, pageSum, callback) {
       $(".pagination").bootstrapPaginator({
           //设置版本号
           bootstrapMajorVersion: 3,
           // 显示第几页
           currentPage: pageCurrent,
           // 总页数
           totalPages: pageSum,
           //当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
           onPageClicked: function (event,originalEvent,type,page) {
               // 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面
               pageable.page = page-1;
               callback && callback()
           }
       })
   }
	
   function searchChange(){
	   var search=$('#imageSearch').val();
	   var src='sysFile/pictureList';
	   $("#box").load(src,{search:search});
   }
</script>
</body>
</html>